@prefix-button: ~'@{nameSpace}-button';

.@{prefix-button} {
  .not-user-select();
  display: inline-block;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--design-neutral-color);
  cursor: pointer;
  transition: all 0.1s;
  border: none;
  border-width: var(--design-border-sm);
  border-style: solid;
}


.@{prefix-button}-size-small {
  padding: 0 10px;
  height: 24px;
}

.@{prefix-button}-size-default {
  padding: 0 14px;
  height: 32px;
}

.@{prefix-button}-size-large {
  padding: 0 18px;
  height: 40px;
}

.@{prefix-button}-size-small-icon {
  height: 24px;
  width: 24px;
}

.@{prefix-button}-size-default-icon {
  height: 32px;
  width: 32px;
}

.@{prefix-button}-size-large-icon {
  height: 40px;
  width: 40px;
}

.@{prefix-button}-border-none {
  border: none;
}


// default
.@{prefix-button}-font-default {
  color: var(--design-text-color-5);
}

.@{prefix-button}-bg-default {
  background-color: transparent;
}

.@{prefix-button}-border-default {
  border-color: var(--design-neutral-color-1);
}

.@{prefix-button}-font-default-hover {
  &:hover {
    color: var(--design-text-color-2);
  }
}

.@{prefix-button}-bg-default-hover {
  &:hover {
    background-color: var(--design-bg-color-1);
  }
}

.@{prefix-button}-border-default-hover {
  &:hover {
    border-color: var(--design-neutral-color-2);
  }
}

// secondary
.@{prefix-button}-font-secondary {
  color: var(--design-neutral-color-2);
}

.@{prefix-button}-bg-secondary {
  background-color: transparent;
}

.@{prefix-button}-border-secondary {
  border-color: var(--design-neutral-color-3);
}

.@{prefix-button}-font-secondary-hover {
  &:hover {
    color: var(--design-neutral-color-1);
  }
}

.@{prefix-button}-bg-secondary-hover {
  &:hover {
    background-color: var(--design-bg-color-1);
  }
}

.@{prefix-button}-border-secondary-hover {
  &:hover {
    border-color: var(--design-neutral-color-2);
  }
}

// primary
.@{prefix-button}-font-primary {
  color: var(--design-base-color);
}

.@{prefix-button}-bg-primary {
  background-color: transparent;
}

.@{prefix-button}-border-primary {
  border-color: var(--design-base-color);
}

.@{prefix-button}-font-primary-hover {
  &:hover {
    color: var(--design-base-color-6);
  }
}

.@{prefix-button}-bg-primary-hover {
  &:hover {
    background-color: var(--design-base-color-3);
  }
}

.@{prefix-button}-border-primary-hover {
  &:hover {
    border-color: var(--design-base-color-6);
  }
}


// success
.@{prefix-button}-font-success {
  color: var(--design-success-color-5);
}

.@{prefix-button}-bg-success {
  background-color: transparent;
}

.@{prefix-button}-border-success {
  border-color: var(--design-success-color);
}

.@{prefix-button}-font-success-hover {
  &:hover {
    color: var(--design-success-color-7);
  }
}

.@{prefix-button}-bg-success-hover {
  &:hover {
    background-color: var(--design-success-color-10);
  }
}

.@{prefix-button}-border-success-hover {
  &:hover {
    border-color: var(--design-success-color-6);
  }
}


// error
.@{prefix-button}-font-error {
  color: var(--design-error-color-5);
}

.@{prefix-button}-bg-error {
  background-color: transparent;
}

.@{prefix-button}-border-error {
  border-color: var(--design-error-color);
}

.@{prefix-button}-font-error-hover {
  &:hover {
    color: var(--design-error-color-7);
  }
}

.@{prefix-button}-bg-error-hover {
  &:hover {
    background-color: var(--design-error-color-10);
  }
}

.@{prefix-button}-border-error-hover {
  &:hover {
    border-color: var(--design-error-color-6);
  }
}


// warning
.@{prefix-button}-font-warning {
  color: var(--design-warning-color-5);
}

.@{prefix-button}-bg-warning {
  background-color: transparent;
}

.@{prefix-button}-border-warning {
  border-color: var(--design-warning-color);
}

.@{prefix-button}-font-warning-hover {
  &:hover {
    color: var(--design-warning-color-7);
  }
}

.@{prefix-button}-bg-warning-hover {
  &:hover {
    background-color: var(--design-warning-color-10);
  }
}

.@{prefix-button}-border-warning-hover {
  &:hover {
    border-color: var(--design-warning-color-6);
  }
}


// disabled
.@{prefix-button}-font-disabled {
  color: var(--design-neutral-color-3);
}

.@{prefix-button}-bg-disabled {
  background-color: var(--design-bg-color-2);
}

.@{prefix-button}-border-disabled {
  border-color: var(--design-neutral-color-3);
}


// text

.@{prefix-button}-bg-text {
  background-color: transparent;
}

.@{prefix-button}-border-text {
  border: none;
}

.@{prefix-button}-disabled {
  filter: opacity(0.5);
  cursor: not-allowed;
}


.@{prefix-button}-underline {
  text-decoration: underline;
}

.@{prefix-button}-line-default {
  border-bottom-color: var(--design-neutral-color-1) !important;

  &:hover {
    border-bottom-color: var(--design-base-color) !important;
  }
}